@import './variable.scss';

::v-deep .event-dialog {
  background-color: #1a4969;
  height: 70%;
  cursor: default;

  .default-divider {
    background-color: rgba(#dcdfe6, 0.8);
    margin: 0;
  }
  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;

    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }

  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(126)});

    .event-body{
      width: 100%;
      height: 100%;
    }

    .event-scrollbar {
      width: 100%;
      height: 100%;
    }

    .event-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
    }

    .el-scrollbar__bar.is-horizontal {
      display: none;
    }

    .el-form {
      height: 100%;

      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }

      .el-form-item {
        display: flex;
        margin-bottom: px(22);
        margin-right: px(10);
        &__content {
          color: #fff;
          line-height: px(34);
        }
        &__label {
          color: #fff;
          line-height: px(32);
          font-size: px(16);
          color: #fff;
          width: px(150);
        }
        .el-input__inner {
          width: px(300);
          height: px(32);
          line-height: px(32);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          font-size: px(16);
        }
        .el-select .el-input__inner{
          height: px(32) !important;
        }
        .el-select .el-input .el-select__caret,.el-input .el-input__clear{
          font-size: px(14);
        }
        .el-select .el-input__icon{
          line-height: px(32)
        }
        .el-icon-time{
          line-height: px(32);
          font-size: px(14);
        }
      }

      .remark {
        .el-textarea__inner {
          font-size: px(14);
          width: px(540);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
      }
      .lng-lat-positon {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        background-color: #fff;
        height: px(30);
        width: px(200);
      }
      .event-map {
        height: px(300);
        width: px(400);
      }
    }
  }

  .el-dialog__footer {
    padding: px(20) px(30) px(10);

    .el-button {
      background-color: #1a4969;
      color: #fff;
      height: px(32);
      width: px(70);
      font-size: px(14);
      border-radius: px(5);
      padding: 0;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .el-dialog__wrapper{
    position: absolute;
    height: 100%;
  }

  .inner-dialog {
    background-color: #1a4969;
    width: 100%;
    height: 100%;
    margin-top: 0 !important;
    margin-bottom: 0;
    .el-dialog__body {
      padding-right: px(50);

      .el-scrollbar__view{
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-card{
          margin-bottom: px(15);
        }
      }
    }
    .el-dialog__footer {
      position: absolute;
      bottom: 0;
      right: px(20);

      .el-button {
        background-color: #1a4969;
        color: #fff;
        height: px(32);
        width: px(100);
        font-size: px(14);
        border-radius: px(5);
        padding: 0;
        &:hover {
          background-color: #409eff;
        }
      }
    }
    .back-to-list {
      color: #fff;
      height: px(22);
      width: px(22);
    }
    .attachment-carousel {
      width: 100%;
      .el-carousel__container{
        height: px(300);
      }
      .attachment-carousel-item {
        height: 100%;
        background-color: #fff;
        .el-image,
        video,
        audio {
          height: 100%;
          width: 100%;
        }
        // img{
        //   height: 100%;
        //   width: 100%;
        // }
      }
      .el-carousel__indicator{
        padding: px(6) px(4);
        .el-carousel__button{
          font-size: px(12);
          padding: px(2) px(10)
        }
      }
      
    }
  }
}